Reusing event listeners with Svelte actions

Posted on 2023-04-02 by

henrikvilhelmberglund

Here we're going to compare event listeners with actions. Meaning, we will rewrite the code using event listeners as code using actions instead.

Here we're using currentTarget to avoid binding to multiple variables. Very vanilla JS!
<script>
	function blurOnEscape(event) {
		if (event.key === "Escape") {
			event.currentTarget.blur();
		}
	}
</script>

<input on:keydown={blurOnEscape} />
<input on:keydown={blurOnEscape} />
<input on:keydown={blurOnEscape} />

Next example:

Here we use a higher order function to create a new function. This could lead to lower performance since we do this whenever input1, input2 or input3 changes.
<script>
	let input1;
	let input2;
	let input3;

	function createNextOnEnter(input) {
		return function nextOnEnter1(event) {
			if (event.key === "Enter") {
				if (input) {
					input.focus();
				} else {
					event.currentTarget.blur();
				}
			}
		};
	}
</script>

<input bind:this={input1} on:keydown={createNextOnEnter(input2)} />
<input bind:this={input2} on:keydown={createNextOnEnter(input3)} />
<input bind:this={input3} on:keydown={createNextOnEnter()} />

Final example:

Here we wait for user input to display a div if the input was the same as our secret.
<script>
	let unlocked = false;
	let keys = [];
	let timeoutId = null;
	let SECRET = "ArrowUp,ArrowDown,ArrowUp,ArrowDown,ArrowLeft,ArrowRight,ArrowLeft,ArrowRight";
	function onKeydown(event) {
		keys.push(event.key);

		if (keys.join(",") === SECRET) {
			unlocked = true;
		}

		if (timeoutId) clearTimeout(timeoutId);
		timeoutId = setTimeout(() => {
			timeoutId = null;
			keys = [];
      unlocked = false;
		}, 2000);
	}
</script>

{keys}
<input on:keydown={onKeydown} />

{#if unlocked}
	<div>Secret unlocked!</div>
{/if}

So when should you use event listeners and when should you use actions? It depends . Preference of course but also what you're looking for, do you need multiple elements with the same function? Maybe use actions. Is it a one-off thing? Maybe event listeners.

Both methods work! 😊